<template>
  <div class="custom-link">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="adaptive-form"
      @submit.native.prevent
    >
      <el-form-item
        label="关键字"
        prop="title"
      >
        <el-select
          v-model="keywords"
          multiple
          filterable
          remote
          allow-create
          default-first-option
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option-group
            v-for="group in groupWords"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.options"
              :key="item.text"
              :label="item.text"
              :value="item.text"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'KeywordLink',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      options: [],
      hots: [],
      keywords: [],
      list: [],
      loading: false,
      ruleForm: {
        title: '',
        map_id: 301,
        link: ''
      },
      linkHints: [
        {
          type: 301,
          text: '路径必须以“/”开头，例：“/pages/goods/list/list”'
        },
        {
          type: 302,
          text:
            '路径必须是可访问的外部链接地址，以“http|https://”开头，例：“https://www.domain.com/url”'
        }
      ],
      rules: {
        title: [
          {
            required: true,
            message: '请输入链接名称',

            trigger: 'blur'
          },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
        link: [{ required: true, message: '请输入链接跳转路径', trigger: 'blur' }]
      }
    }
  },
  computed: {
    words() {
      if (this.value && this.value.map_data && this.value.map_data.keywords) {
        return this.value.map_data.keywords.split(',')
      }
      return []
    },
    linkHint() {
      return this.linkHints.find(item => {
        return item.type === this.ruleForm.map_id
      })
    },
    groupWords() {
      var data = []
      if (this.options.length > 0) {
        data.push({
          label: '搜索结果',
          options: this.options
        })
      }
      if (this.hots.length > 0) {
        data.push({
          label: '热搜词',
          options: this.hots
        })
      }
      return data
    }
  },
  watch: {
    keywords: {
      handler(v) {
        this.onEmitInput(v)
      },
      deep: true
    }
  },
  mounted() {
    this.keywords = this.words
    this.getData()
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.getData(query)
      } else {
        this.options = []
      }
    },
    getData(word = '') {
      this.loading = true
      this.$http.assemble
        .keyword({
          keyword: word
        })
        .then(
          response => {
            const { data } = response
            if (!word) {
              this.hots = data
            } else {
              this.options = data
            }
            this.loading = false
          },
          error => {
            console.log(error)
            this.loading = false
          }
        )
    },
    onEmitInput(data) {
      this.$emit('input', {
        map_id: 10,
        map_data: {
          title: data.join(','),
          keywords: data.join(',')
        },
        source: 'keyword'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  display: block;
}
</style>
